<template>
<div class="container">
        <header>
            <h1><a href="login.html">我的</a></h1>
            <a href="#"><img src="images/icon3.png"></a>
        </header>
        <section>
            <ul>
                <li class="title">房源管理</li>
                <li class="content">
                    <a class="xz" href="#">预约中心<span class="active">已预约2家</span></a>
                </li>
                <li class="content">
                    <a class="xz" href="#">房源收藏<span>已收藏4套</span></a>
                </li>
                <li class="content">
                    <a class="xz" href="#">资讯收藏</a>
                </li>
                <li class="title">通知管理</li>
                <li class="content">
                    <a v-on:click="k" id="k" href="#">消息中心
                        <div class="keys">
                            <div class="yuan" style="left: 0rem;"></div>
                        </div>
                    </a>
                </li>
                <li class="title">其他</li>
                <li class="content">
                    <a v-on:click="Drak" id="dark" href="#">夜间模式
                        <div class="keys">
                            <div class="yuan" style="left: 0rem;"></div>
                        </div>
                    </a>
                </li>
                <li class="content">
                    <a class="xz" href="#">意见反馈</a>
                </li>
                <li class="content">
                    <a class="xz" href="#">关于包图租房</a>
                </li>
                <li class="content">
                    <a class="xz" href="bankcard.html">设置</a>
                </li>
            </ul>
        </section>
    </div>
</template>

<script type="text/ecmascript-6">
	import $ from 'jquery'
	export default {
		name:'my',
		data () {
		return {

		}
	},
	computed:{
		//	计算属性
	},
	methods:{
		//	方法
		//	消息中心开关
		k(){
			console.log("you click of news button");
			this.keysClick($("#k .keys"));
		},
		//	夜间模式开关
		Drak(){
			// e.preventDefault();
			$("body,header,.navbot ul").css({
                "transition-property": "background-color,opacity",
                "transition-duration": ".8s"
			});
			let _this = this;
			let obj = $('#dark .keys');

			this.keysClick(obj, function() { //回调函数
				var isDark = localStorage.getItem("isDark");
				if (isDark == "true") {
					localStorage.setItem("isDark", "false");
				} else {
					localStorage.setItem("isDark", "true");
				}
				_this.isDarkfun();
			});
		},
		//	按钮开关
		keysClick(obj, callback){
			//	按钮动画
						
			var keys = obj;
			var yuan = obj.children('.yuan');
			if (yuan.css("left") == 0 + "px") {
				yuan.css("left", 0.52 + "rem");
				keys.css("backgroundColor", "#22fb35");
				// left = 1;
			} else {
				yuan.css("left", "0rem");
				keys.css("backgroundColor", "#f2f2f8");
				// left = 0;
			}
			callback && callback();
		},
		// 深色模式
		isDarkfun() {
			var isDark = localStorage.getItem("isDark");
			if (isDark == "true") {
				$("#dark").attr("isDark", "true");
				this.setTheme();
			} else {
				localStorage.setItem("isDark", "false");
				$("#dark").attr("isDark", "false");
				this.clearTheme();
			}
		},
		//	设置夜间模式
		setTheme(){
			// 把背景色设置黑色、把文字设置为白色
			$('*').css("color", "#fff");
			$('body,nav ul,header,select,.addbank,.addbank .info input[type="text"],.tel input[type="text"],footer,.form-control').css({
				"background-color": "#000",
			});
			$("ul.c li,.search,.text ul li,.search input[type='text'],.username,footer .left,.weather").css({
				"background-color": "#333"
			});
			$('body').css("opacity", "0.8");
		},
		//	取消夜间模式
		clearTheme(){
			$('*').css("color", "");
			$("body,nav ul,header,select,ul.c li,.search,.text ul li,.search,.search input[type='text'],footer,.addbank,.addbank .info input[type='text'],.tel input[type='text'],.username,footer .left,.weather,.form-control").css({
				"background-color": "",
			});
			$('body').css("opacity", "");
		}
	},
	components: {
		//	组件

	}
	// created、mounted、updated、destroyed

	}
</script>

<style scoped lang="less" rel="stylesheet/less">
header {
	background-size: 100%;
	background-image: url(../../public/images/mybg.png);
	background-repeat: no-repeat;
	background-color: #fff;
	width: 100%;
	height: 2.43rem;
	/*height: auto;*/
	position: relative;
}

header h1 {
	font-size: .6rem;
	padding-left: .35rem;
	padding-top: 1.22rem;
}

header img {
	position: absolute;
	right: .42rem;
	top: 1.28rem;
	width: .41rem;
	height: .46rem;
	/*font-size: .46rem;*/
}

section {
	margin: 0 .35rem;
	margin-bottom: 1.3rem;
}

section a {
	display: block;
	width: 100%;
	height: 100%;
}

section .title {
	height: .6rem;
	color: #b7b7b4;
	font-size: .28rem;
	line-height: .6rem;
}

section .content {
	height: 1.22rem;
	width: 100%;
	border-bottom: .01rem #f6f6f6 solid;
	font-size: .36rem;
	line-height: 1.4rem;
}
section .content:last-child{
	border: none;
}

section .content span {
	font-size: .32rem;
	color: #b0b0ae;
	float: right;
	margin-right: .38rem;
	line-height: 1.2rem;
	position: relative;
	top: .1rem;
}

section .content span.active {
	color: #fb6c62 !important;;
}

section li {
	position: relative;
}

section li.content a.xz::after {
	font-family: "iconfont";
	position: absolute;
	content: "\e7a7";
	top: 0;
	right: -0.2rem;
	width: .5rem;
	height: 1.22rem;
	line-height: 1.22rem;
	font-size: .32rem;
	color: #b7b7b4;
}
section li.content .keys{
	width: 1.1rem;
	height: .6rem;
	border-radius: .3rem;
	background-color: #f2f2f8;
	border: 1px #eaeaec solid;
	position: absolute;
	top: .3rem;
	right: 0;
	transition: all .2s;
}
section li.content .keys .yuan{
	width: .6rem;
	height: .6rem;
	border-radius: 50%;
	background-color: #fff;
	position: relative;
	left: 0;
	box-shadow: 0.05rem 0 0.1rem #ccc;
	transition: all .2s;
}
 
</style>
